<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Free</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html {
          --button-height: 32px;
          --font-size: 14px;
          --button-bg: white;
          --button-active-bg: #eee;
          --border-redius: 4px;
          --color: #333;
          --border-color: #999;
          --border-color-hover: #666;
      }

      #app {
      }

      body {
          font-size: var(--font-size);
      }
  </style>

</head>
<body>

<div id="app" style="padding-left: 100px; padding-top: 150px">
  <g-collapse :selected.sync="selectedTab" single>
    <g-collapse-item title="标题1" name="1">内容1</g-collapse-item>
    <g-collapse-item title="标题2" name="2">内容2</g-collapse-item>
    <g-collapse-item title="标题3" name="3">内容3</g-collapse-item>
  </g-collapse>
  {{selectedTab}}

</div>
<script src="./src/app.js"></script>
</body>
</html>
